<template>
    <div style="width: 100%; height: 100%">
        <div class="margin-box" v-loading="loading">
                    <div class="document-directory">
                        <span class="directory-title"> 目录 </span>
                        <div class="directory-tree">
                            <!-- 目录渲染 -->
                            <el-tree :data="treeData.outline" :default-expand-all="true" :expand-on-click-node="false"
                                :props="treeData.defaultProps" @node-click="data => navigateTo(data.dest)">
                            </el-tree>
                        </div>
                    </div>
                    <!-- pdf渲染 -->
                    <div class="PDF-content pdf-container" ref="pdfContainer">
                    </div>
       


                </div>
    </div>
</template>

<script>
import * as PdfJs from "pdfjs-dist/build/pdf.js";
import { getDocument } from "pdfjs-dist";
PdfJs.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.entry");
async function getPdf(src) {
    const loadingTask = getDocument({
        url: src,
        disableFontFace: true,   //禁用文本抗锯齿 ,提高渲染性能
    });
    const pdf = await loadingTask.promise;
    return pdf;
}
export default {
    name: 'teachManageList',
    components: {

    },
    data() {
        return {
            pdf: null,
            numPages: 0,
            treeData: {
                outline: [],
                defaultProps: {
                    children: 'items',
                    label: 'title'
                }
            },
            //http://www.aikeji.top:50005/_uploads/PHOTO/1722477750388.pdf  书本
            // http://www.aikeji.top:50005/_uploads/PHOTO/1722420083973.pdf
            src: 'http://www.aikeji.top:50005/_uploads/PHOTO/1722420083973.pdf',
            loading: false,
            fragment: document.createDocumentFragment(),
           

        };
    },
    mounted() {
        const { state } = this.$store;
        this.loadPdf(this.src);

    },
    computed: {
      
    },
    methods: {
        async loadPdf(src) {
            this.loading = true

            // 注意，此处接受的src必须是浏览器可以直接访问pdf的路径
            const pdf = await getPdf(src);
            this.pdf = pdf;
            console.log("pdfpdf*****************")
            console.log(pdf)
            // 获取pdf的也页数
            this.numPages = pdf.numPages;
            console.log(this.numPages)
            this.renderAllPages();

            this.renderOutline(pdf);
        },
        //渲染整个pdf
        async renderAllPages() {
            for (let i = 1; i <= this.numPages; i++) {
                // 通过文档碎片统一渲染提高性能

                // 插入每一页的pdf渲染
                this.fragment.appendChild(await this.renderPage(i));
            }
            this.$refs.pdfContainer.appendChild(this.fragment);

            this.loading = false
        },
        // 获取目录树
        async renderOutline(pdf) {
            const outline = await pdf.getOutline();
            this.treeData.outline = outline
            console.log(outline)
        },
        // 渲染某页页pdf
        async renderPage(pageNumber) {
            if (!this.pdf) {
                return;
            }

            const page = await this.pdf.getPage(pageNumber);
            console.log("page++++++++++++++++++")
            console.log(page)
            // 设置清晰度
            const viewport = page.getViewport(1);

            const canvas = document.createElement("canvas");
            canvas.id = `page-${pageNumber}`;
            canvas.width = viewport.width?viewport.width:595.22;
            canvas.height = viewport.height?viewport.height:842;
            console.log("viewport++++++++++++++++++")
            console.log(viewport)
            const ctx = canvas.getContext("2d");
            const renderContext = {
                canvasContext: ctx,
                viewport: viewport,
            };
            console.log(page.rotate)
          
            await page.render(renderContext).promise;
            console.log(canvas)
            return canvas
        },
        // 点击跳转到某页
        async navigateTo(dest) {
            console.log(dest)
            if (!this.pdf || !dest) {
                return;
            }

            // 获取目标页面的页码
            const pageNumber = (await this.pdf.getPageIndex(dest[0])) + 1;
              console.log(pageNumber)
            // 滚动到目标页面
            const pageElement = document.getElementById(`page-${pageNumber}`);
            if (pageElement) {
                pageElement.scrollIntoView({ behavior: "smooth" });
            }
        },
    },
};
</script>

<style scoped lang="scss">
.margin-box {
  box-sizing: border-box;
  height: 95%;
  width:100%;
  display: flex;
}
.document-directory {
  width:300px;
  background-color: #fff;
  height: 100%;
  padding:10px;
  overflow: auto;
}
.directory-title {
  display: inline-block;
  font-size: 18px;
  margin-bottom: 20px;
}
.PDF-content {
  
  width:calc(100% - 300px);
  height: 100%;
  overflow: auto;
  background: #eff;
 
  margin:0 10px;
}
::v-deep .el-tree-node.is-current > .el-tree-node__content {
    color: #cc2722 !important;
    font-weight: 600;
}
::v-deep.el-tree-node:focus>.el-tree-node__content{
  background-color:#fff !important;
}
::v-deep.el-tree-node__content:hover{
  background-color:#fff !important;
}
::v-deep.el-icon-caret-right:before {
    content: "";
}
::v-deep.el-tree-node__content{
  height: 40px;
}
::v-deep.el-tree-node__label{
  line-height: 40px;
}

</style>



